<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
      <title>
         QuickSee CPU Usage API
      </title>
      <script type="text/javascript" src="http://www.google.com/jsapi"></script>
      <script type="text/javascript">
         google.load('visualization', '1', {packages: ['table']});
      </script>
      <script type="text/javascript">



	var queryDict = {}
	location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})


         var query1, visualization1;

         function initialize() {
            visualization1 = new google.visualization.Table(document.getElementById('visualization1'));
            query1 = new google.visualization.Query('http://127.0.0.1/python/snmp/system.py?host=HOST'.replace("HOST",queryDict['host_ip']), {sendMethod:'scriptInjection'});
            query1.setRefreshable(true);
            query1.setRefreshInterval(2);
            query1.send(drawVisualization1);

         }

	    var options = {
            showRowNumber: false, 
            headerRow: 'bigAndBoldClass',
            hoverTableRow: 'highlightClass'
        };


         function drawVisualization1(response) {
            if (response.isError()) {
               alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
               return;
            }
            visualization1.draw(response.getDataTable(), options);
         }

         google.setOnLoadCallback(initialize);
      </script>


   </head>
   <body>
<form name="input" action="" >
IP: <input type="text" name="host_ip" value="Monitoring IP" id="host_ip" />
<script>
        document.getElementById("host_ip").defaultValue = queryDict["host_ip"];
</script>
<input type="submit" value="Submit">
</form>
<table>
<tr>
<td>
      <div>
         <div id="visualization1" style="height: 200px; width: 700px; border: 0px solid; float: left;" />
      </div>
</td>
</tr>
<tr>
<td>
<div id="log"></div>
</td>
</tr>
</table>
<script type="text/javascript">
function print(value) {
    document.getElementById('log').innerHTML += value;
}

</script>
   </body>
</html>
